<template>
  <div>
    <StoreChoice
      ref="StoreChoice"
      :isReset="isReset"
      :current="store"
      :multipleChoice="false"
      @listenToStoreSelect="getSelectStoreValue"
      :statusFilter="true"
      :hasTotal="true"
     
    />
    <mt-popup v-model="popupVisible" position="right" :modal="true" style="width: 82.7%;" class="employeeManage-filterItem">
      <customHeader middleTitle="筛选" @leftCallBack="back"  :jsBridgeBack="false"/>

      <div class="section">
        <div class="title">门店范围</div>
        <div class="picker-val" @click="handleClickSelectStore">
          <span>{{formateStore}}</span>
          <!-- <i v-if="roleInfo.manyShopFlag" class="zhk-list_rarrow"></i> -->
        </div>
      </div>
      <div class="section has-right">
        <div class="title">员工角色</div>
        <ul class="check-list">
          <li
            class="item"
            :class="{checked:item.checked}"
            v-for="(item,index) in employeeLevelList"
            :key="index"
            @click="handleEmployeeLevelListCheck(item)"
          >
            {{ item.label }}
            <i class="zhk-detail_select"></i>
          </li>
        </ul>
      </div>
      <div class="section has-right">
        <div class="title">在职状态</div>
        <ul class="check-list">
          <li
            class="item"
            :class="{checked:item.checked}"
            v-for="(item,index) in employeeOnjobStatusList"
            :key="index"
            @click="handleEmployeeOnjobStatusListCheck(item)"
          >
            {{ item.label }}
            <i class="zhk-detail_select"></i>
          </li>
        </ul>
      </div>
      <div class="btn-wrapa  margin-safe-area-bottom">
        <div @click="reset">重置</div>
        <div @click="sure">确定</div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
import Vue from "vue";
import { DatetimePicker, Popup, Toast } from "mint-ui";
import StoreChoice from "../../components/StoreChoice/StoreChoice";
import customHeader from "../../components/header/header";
Vue.component(Popup.name, Popup);
export default {
  name: "filterItem",
  data() {
    return {
      method:"",
      isReset: true, //门店重置
      selectValue: "1",
      popupVisible: false,
      employeeLevelList: this.employeeLevel, //收款方式
      employeeOnjobStatusList:this.employeeOnjobStatus,
      store: [],
      isAllStore: true, //是否选择了全部门店
      filterBak: {
        store: [],
        employeeLevelList: this.employeeLevel,
        employeeOnjobStatusList:this.employeeOnjobStatus,
        isAllStore: true
      },

    };
  },
  components: {
    customHeader,
    StoreChoice
  },
  computed: {
    formateStore() {

      let val = "";
      if(this.roleInfo.manyShopFlag!==undefined&&!this.roleInfo.manyShopFlag){
          this.store= [{ selectName: this.roleInfo.shopName, selectKey: this.roleInfo.yzShopId }];
           val = this.roleInfo.shopName;
      }
     else if (!this.isAllStore) {
        if (this.store.length === 1) {
          val = this.store[0].selectName;
        } else {
          val = "已选择" + this.store.length + "家门店";
        }
      } else {
        val = "全部门店";
      }
      return val;
    }
  },
  props: {
    initialStartDateScope: {
      type: Date,
      default: () => {
        return new Date("2000");
      }
    },
    defaultDate: {
      type: Date
    },
    employeeLevel: {
      type: Array
    },
    employeeOnjobStatus:{
      type: Array
    },
    roleInfo:{
      type:Object
    }
  },
  methods: {

    //门店选择回调
    getSelectStoreValue(value, storeName) {
      if (storeName === "全部门店") {
        this.isAllStore = true;
      } else {
        this.isAllStore = false;
      }
      this.store = value;
    },
    //打开门店选择
    handleClickSelectStore() {
      if(this.roleInfo.manyShopFlag!==undefined&&!this.roleInfo.manyShopFlag){
        return;
      }
      this.$refs.StoreChoice.popupShow();
    },
    handleEmployeeLevelListCheck(item) {
      this.employeeLevelList.forEach(function(currentValue, index, arr) {
        if (item.value === currentValue.value) {
          currentValue.checked = !currentValue.checked;
        }else{
          currentValue.checked = false;
        }
      });
    },
    handleEmployeeOnjobStatusListCheck(item) {
      this.employeeOnjobStatusList.forEach(function(currentValue, index, arr) {
        if (item.value === currentValue.value) {
          currentValue.checked = !currentValue.checked;
        }else{
          currentValue.checked = false;
        }
      });
    },

    popupShow() {
      this.popupVisible = true;
    },
    filterSure() {
      this.popupVisible = false;
      const selectObj = {
        store: this.store,
        employeeLevelList: this.employeeLevelList.filter(item => {
          return item.checked === true;
        }),
        employeeOnjobStatusList: this.employeeOnjobStatusList.filter(item => {
          return item.checked === true;
        }),
      };
      this.$emit("filterChoice", selectObj);

      this.filterBak.store = JSON.parse(JSON.stringify(this.store));
      this.filterBak.employeeLevelList = JSON.parse(JSON.stringify(this.employeeLevelList));
      this.filterBak.employeeOnjobStatusList = JSON.parse(JSON.stringify(this.employeeOnjobStatusList));
      this.filterBak.isAllStore = this.isAllStore;
    },

    //返回
    back() {

      this.employeeLevelList = JSON.parse(JSON.stringify(this.filterBak.employeeLevelList));
      this.employeeOnjobStatusList = JSON.parse(JSON.stringify(this.filterBak.employeeOnjobStatusList));
      if (this.filterBak.store.length > 0) {
        this.store = JSON.parse(JSON.stringify(this.filterBak.store));
      } else {
        this.isReset = new Date();
      }
      this.isAllStore = this.filterBak.isAllStore;
      this.popupVisible = false;
    },

    //重置
    reset() {
      this.isReset = new Date();
      this.employeeLevelList.forEach(v => {
        v.checked = false;
      });
       this.employeeOnjobStatusList.forEach(v => {
        v.checked = false;
      });
    },
    //确定
    sure() {
      this.filterSure();
    }
  },
  created() {
  },
  watch: {
    employeeLevelList(newVal) {
      this.employeeLevelList = newVal;
      this.filterBak.employeeLevelList = JSON.parse(JSON.stringify(newVal));
    },
    employeeOnjobStatusList(newVal) {
      this.employeeOnjobStatusList = newVal;
      this.filterBak.employeeOnjobStatusList = JSON.parse(JSON.stringify(newVal));
    }
  }
};
</script>

<style lang="scss" scoped>
@import "employeeManage";
</style>
